<template>
    <div >
        <div v-if="ifShow">
            <el-dialog
            title="查看图片"
            :visible.sync="ifDialog"
            >
                <img style="width:300px;height:300px" :src="imgSrc" alt="">
                <div style="margin-top: 40px"><el-button type="primary" @click="closeDialog" >确定</el-button></div>
            </el-dialog>

        </div>
    </div>
</template>

<script>
export default {
    name: 'PreImage',
    data () {
        return {
            ifShow: false,
            ifDialog: true,
            imgSrc: ''
        }
    },
    mounted () {
        //监听 hover事件
        var that = this;
        document.body.addEventListener('mouseover', function (e) {
            if (e.target.className === 'pre-image') {
                e.target.style.cursor = 'pointer';
            }
        });
        document.body.addEventListener('click', function (e) {
            
            if (e.target.className === 'pre-image') {
                
                var imgSrc = e.target.src;
                that.imgSrc = imgSrc;
                that.ifShow = true;
                that.ifDialog = true;
            }
        });
    },
    methods: {
        closeDialog () {
            this.ifShow = false;
        }
    }
}
</script>

<style lang="stylus" scoped>
  
</style>




